<template>
<!-- 	<text class="title">*仅显示一二级代理</text> -->
	<!-- <view class="level">
		<view class="level-header">
			<view class="top">
				<image src="../../static/avatar-default.png" mode=""></image>
				<text>哈哈哈哈</text>
			</view>
			<text class="status">未投资</text>
		</view>
	</view> -->
	<view class="level" v-for="(item,index) in team" :key="index">
		<view class="level-header">
			<view class="top">
				<image :src="item.avatar || '../../static/avatar-default.png'" mode=""></image>
				<text>{{item.nickName}}</text>
			</view>
			<text class="status">{{item.totalAmount>0?'已投资':'未投资'}}</text>
		</view>

		<view class="level-bottom" v-if="item.children.length">
			<image src="../../static/line.png" class="line" mode=""></image>
			<view class="item" v-for="(item,index) in item.children">
				<image :src="item.avatar || '../../static/avatar-default.png'" mode=""></image>
				<text class="item-status">{{item.totalAmount>0?'已投资':'未投资'}}</text>
				<text class="name">{{item.nickName}}</text>
			</view>
		</view>
	</view>
	<image src="../../static/empty.png" mode="widthFix" style="width: 348rpx;display: block;margin:400rpx auto;" v-if="emptyState"></image>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		teamList,
		user
	} from '@/util/api.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const team = ref()
	const emptyState = ref(false)
	const getData = async ()=>{
		const result = await teamList({pageNum:1,pageSize:100000})
		if(result.data.records.length==0){
			emptyState.value = true
		}
		team.value = result.data.records
	}
	onShow(()=>{
		getData()
	})
</script>

<style lang="scss">
	.level {
		margin: 38rpx;
		background: #FFFFFF;
		box-shadow: 0px 15rpx 38rpx 2rpx rgba(49, 54, 70, 0.05);
		border-radius: 23rpx;
		padding: 38rpx;

		.level-bottom {
			display: flex;
			flex-wrap: wrap;
			margin-top: 38rpx;
			margin-right: -79rpx;

			.line {
				width: 100%;
				height: 2rpx;
				margin-bottom: 48rpx;
			}

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 0 79rpx 38rpx 0;

				image {
					width: 85rpx;
					height: 85rpx;
					display: block;
				}

				.item-status {
					width: 62rpx;
					height: 25rpx;
					background: #FEF6E9;
					border-radius: 25rpx;
					display: block;
					color: #FF984D;
					font-size: 15rpx;
					text-align: center;
					line-height: 25rpx;
					margin-top: -12rpx;
					position: relative;
				}

				.name {
					color: #333;
					ffont-size: 36rpx;
					display: block;
					margin-top: 12rpx;
				}
			}
		}

		.level-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.top {
			display: flex;
			align-items: center;

			image {
				width: 85rpx;
				height: 85rpx;
				display: block;
				margin-right: 20rpx;
			}

			text {
				color: #333;
				ffont-size: 36rpx;
			}

		}

		.status {
			width: 104rpx;
			height: 50rpx;
			background: #FEF6E9;
			border-radius: 25rpx;
			display: block;
			color: #FF984D;
			font-size: 20rpx;
			text-align: center;
			line-height: 50rpx;
		}
	}

	.title {
		display: block;
		font-weight: 800;
		color: #333;
		font-size: 38rpx;
		margin: 38rpx;
	}

	page {
		background: #F6F7F9;
	}
</style>